<template>
  <div class="articleAside">
    <h4 class="aside_title">相关攻略</h4>
    <div
      class="recommend-list"
      v-for="(item, index) in recommendList"
      :key="index"
    >
      <a href="#" class="recommend-item" @click="jumpRecommend(item)">
        <div class="recommend-item-info">
          <div class="recommend-item-info-img" v-if="item.images[0]">
            <img :src="item.images[0]" alt="" />
          </div>

          <div class="recommend-item-info-text">
            <div>{{ item.title }}</div>
            <p>
              {{ item.updated_at }} &nbsp;阅读 {{ item.watch ? item.watch : 0 }}
            </p>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
import Moment from "moment";

export default {
  props: ["postId"],

  data() {
    return {
      recommendList: [],
    };
  },

  mounted() {
    this.loadRecommend();
  },

  methods: {
    loadRecommend() {
      this.$axios({
        url: "/posts/recommend",
        params: {
          id: this.postId,
        },
      }).then((res) => {
        console.log(res);
        this.recommendList = res.data.data;
        this.recommendList.map((v) => {
          v.updated_at = Moment(v.updated_at).format("YYYY-MM-DD");
        });
      });
    },

    // 推荐文章跳转
    jumpRecommend(item) {
      this.$router.push(`/post/articleDetails?id=${item.id}`);
      this.$emit("jumpRecommend", item.id);
    },
  },
};
</script>

<style lang="less" scoped>
.articleAside {
  margin-left: 20px;
  .aside_title {
    padding-left: 5px;
    font-size: 24px;
    color: #333;
    font-weight: 500;
    font-family: Arial, "Lucida Grande", "Microsoft Yahei", "Hiragino Sans GB",
      "Hiragino Sans GB W3", SimSun, "PingFang SC", STHeiti;
  }

  .recommend-list {
    .recommend-item {
      display: block;
      height: 121px;
      box-sizing: border-box;
      padding: 20px 10px;
      transition: 0.2s all;
      &:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
      .recommend-item-info {
        display: flex;
        height: 100%;
        .recommend-item-info-img {
          width: 100px;
          height: 80px;
          margin-right: 10px;
          > img {
            width: 100%;
            height: 100%;
            border-radius: 6px;
            object-fit: cover;
          }
        }

        .recommend-item-info-text {
          flex: 1;
          height: 100%;
          position: relative;
          padding-bottom: 5px;
          border-bottom: 1px solid #ebedf0;
          > div {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
            &:hover {
              color: #409eff;
            }
          }
          > p {
            position: absolute;
            left: 0;
            bottom: 10px;
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>